<template>
  <div style="width: 100%; background-color: #f4f7fe">
    <div class="signal">
      <div class="box1">
        <div class="left" style="display: flex; padding-left: 40px; box-sizing: border-box">
          <img src="../../assets/img/10.png" alt="" />
          <p style="
              width: 80px;
              border-right: 1px solid black;
              height: 20px;
              font-size: 14px;
              margin-top: 3px;
            ">
            在线行情
          </p>
        </div>
        <div class="right" style="padding-right: 50px">
          <button style="
              background-color: #ff4d4f;
              color: white;
              padding: 5px;
              margin-right: 10px;
              font-size: 14px;
            ">
            在线行情
          </button>
          <button style="
              background-color: #04d1b3;
              color: white;
              padding: 5px;
              font-size: 14px;"
              @click="toPath('/market')">
            投资工具
          </button>
        </div>
      </div>
      <div class="box2">
        <div class="left" v-if="isChartVisible">
         <el-carousel height="500px">
            <el-carousel-item v-for="(i, index) in starBanner" :key="index" style="padding-top: 50px"  @click.native="goTodetail(i.id)">
              <div style="
                  width: 100%;
                  height: 450px;
                  background-color: white;
                  border-radius: 10px;
                  padding-left: 80px;
                  padding-right: 80px;
                "
                
                >
                <img :src="imageURLA" alt="" style="
                    width: 100px;
                    height: 100px;
                    border-radius: 50%;
                    margin-top: -50px;
                    padding: 10px;
                    background-color: white;
                    margin-bottom: px;
                  " />
                <p style="
                    font-size: 18px;
                    color: gray;
                    margin-top: 30px;
                    font-style: italic;
                  ">
                  "{{ i.nickname }}"
                </p>
               
                <my-echart style="margin-top: 30px" :config="i.config"></my-echart>
                <div class="detailmsg" style="width: 400px; display: flex; margin-top: 20px">
                  <div class="left" style="width: 200px; margin-left: -10px; height: 50px">
                    <p class="p1" style="
                        font-weight: bold;
                        font-size: 20px;
                        margin-bottom: 10px;
                      ">
                      {{ i.signature }}
                    </p>
                    <p class="p2" style="font-size: 14px; font-weight: 100">
                      {{ i.account }}
                    </p>
                  </div>
                  <div class="right" style="
                      display: flex;
                      width: 200px;
                      height: 60px;
                      justify-content: space-around;
                      margin-left: -1px;
                    ">
                    <div class="rightl">
                      <p class="p1" style="
                          font-weight: bold;
                          font-size: 20px;
                          margin-bottom: 10px;
                        ">
                        {{ i.winning }}%
                      </p>
                      <p class="p2" style="font-size: 14px; font-weight: 100">
                        收益率
                      </p>
                    </div>
                    <div class="rightr">
                      <p class="p1" style="
                          font-weight: bold;
                          font-size: 20px;
                          margin-bottom: 10px;
                        ">
                        {{ i.withdrawal }}%
                      </p>
                      <p class="p2" style="font-size: 14px; font-weight: 100">
                        最大回撤
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="right">
          <h2>分行者跟单社区</h2>
          <div class="smallbox1">
            <div class="tubiao">
              <img src="../../assets/img/11.png" alt="" />
            </div>
            <div class="smallright">
              <p class="p1">绑定账户</p>
              <p class="p2">绑定已有帐户</p>
            </div>
          </div>
          <div class="smallbox1">
            <div class="tubiao">
              <img src="../../assets/img/12.png" alt="" />
            </div>
            <div class="smallright">
              <p class="p1">成为信号源</p>
              <p class="p2">成为信号源</p>
            </div>
          </div>
          <div class="smallbox1">
            <div class="tubiao">
              <img src="../../assets/img/13.png" alt="" />
            </div>
            <div class="smallright">
              <p class="p1" @click="toPath('/CooperationView')">新开账户</p>
              <p class="p2">前往经纪商新开账户</p>
            </div>
          </div>
          <div class="smallbox1">
            <div class="tubiao">
              <img src="../../assets/img/14.png" alt="" />
            </div>
            <div class="smallright">
              <p class="p1" @click="toPath('/help')">帮助中心</p>
              <p class="p2">社区常见问题</p>
            </div>
          </div>
        </div>
      </div>
      <div class="box3">
        <div class="tounav" style="padding: 10px">
          <p class="p1" style="float: left">筛选</p>
          <p class="p2" style="float: right">重置</p>
        </div>
        <div class="period" style="display: flex; margin-top: 30px; padding-left: 10px">
          <span style="margin-top: 10px; margin-right: 30px; color: gray">交易周期</span>
          <button class="myButton" v-for="button in buttons" :key="button.id" @click="toggleButton(button)"
            :class="{ active: button.isActive }" style="font-weight: 100">
            {{ button.label }}
          </button>
        </div>
        <div class="earning" style="display: flex; margin-top: 25px; padding-left: 10px">
          <span style="color: gray">收益率（%）:</span>
          <div class="block" style="width: 300px; margin-top: -10px; margin-right: 10px">
            <el-slider v-model="value1" range :min="0" :max="300" :active-color="customColor" @change="changeValue1">
            </el-slider>
          </div>
          <span>超过300%</span>
          <span style="margin-left: 30px; color: gray">最大回撤（%）:</span>
          <div class="block2" style="width: 300px; margin-top: -10px; margin-right: 10px">
            <el-slider v-model="value2" range :min="0" :max="100" :active-color="customColor" @change="changeValue1">
            </el-slider>
          </div>
          <span>超过30%</span>
        </div>
      </div>
      <div class="box4">
        <p style="margin-left: 20px">排序:</p>
        <!-- <span style="width: 120px;margin-left: 70px;">收益率</span>
        <span style="width: 110px">总收益</span>
        <span style="width: 110px">订阅人数</span>
        <span style="width: 120px">最大回撤</span>
        <span style="width: 120px">交易时长</span> -->
        <button class="myButton2" v-for="button in buttons2" :key="button.id" @click="toggleButton2(button)"
          :class="{ active: button.isActive }" style="font-weight: 100">
          <i class="el-icon-bottom"></i>
          {{ button.label }}
        </button>
      </div>
      <div class="box5">
        <div class="box5top" v-if="isStartVisible">
          <div class="messagebox"  v-for="(item, index) in startList" :key="item.id" @click="goToProductDetail(item.id)">
            <img :src="imageURLA" alt="" style="
                padding: 10px;
                box-sizing: border-box;
                background-color: white;
              " />
            <p class="p1" style="font-size: 25px; font-weight: bolder; margin-top: 15px">
              {{ item.nickname }}
            </p>
            <p style="margin-top: 15px; font-weight: 100; font-size: 13px">
              {{ item.signature }}
            </p>
            <hr style="margin-top: 15px; color: rgb(180, 165, 165)" />
            <p class="p2" style="color: #22d1a1; font-size: 23px; margin-top: 10px">
              106.76%
            </p>
            <p class="p3" style="margin-top: 10px; font-weight: 100; font-size: 15px">
              收益率
            </p>
            <!-- <div class="chart1" ref="chart1"></div> -->
             <my-echart :config="item.config" />
            <div class="message" style="padding: 0 20px; box-sizing: border-box; line-height: 35px">
              <div class="m1" style="
                  display: flex;
                  justify-content: space-between;
                  margin-bottom: 20px;
                ">
                <span>获利</span>
                <span>{{ item.all_profit_loss }}</span>
              </div>
              <div class="m2" style="
                  display: flex;
                  justify-content: space-between;
                  margin-bottom: 20px;
                ">
                <span>胜率</span>
                <span>{{ item.winning }}%</span>
              </div>
              <div class="m3" style="
                  display: flex;
                  justify-content: space-between;
                  margin-bottom: 10px;
                ">
                <span>最大回撤</span>
                <span>{{ item.withdrawal }}%</span>
              </div>
            </div>
            <div class="level" style="
                display: flex;
                justify-content: space-between;
                overflow: hidden;
                margin-top: 25px;
              ">
              <p style="margin-top: 15px; width: 60px; padding-left: 10px">
                <i style="color: #0487f9">LEVEL{{ item.level }}</i>
              </p>
              <button style="
                  height: 0;
                  width: 0px;
                  border-right: 100px solid #0487f9;
                  border-bottom: 47px solid #0487f9;
                  border-left: 30px solid transparent;
                  color: white;
                  background-color: transparent;
                ">
                <p style="
                    position: absolute;
                    margin-left: -5px;
                    margin-top: -1px;
                    width: 130px;
                    height: 49.5px;
                    background-color: #0487f9;
                    margin-top: -2px;
                  ">
                  <span style="overflow: hidden; line-height: 50px">查看详情</span>
                </p>
              </button>
            </div>
          </div>
         <div class="messagebox1">
            <img src="../../assets/img/15.png" alt="" />
            <p class="p1">认证成为交易员</p>
            <p class="p2">享受更高收益</p>
          </div>
        </div>
      </div>
      <div class="box6">
        <el-pagination background layout="prev, pager, next" :total="1" :small-size="20" class="custom-pagination">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import MyEchart from "@/components/MyEchart.vue";
import { starWaveApi, starListApi } from "@/api/index";
//import MyEchart from '@/components/MyEchart.vue'
export default {
  name: "SignalView",
  data() {
    return {
      isStartVisible: false,  //记录明星列表的状态，等echarts图表数据完全请求过来以后再去渲染列表，解决了数据修改视图不刷新的问题
      isChartVisible: false,
      config: {
        data1: [1,2,3],
        data2: [1,2,3],
      },
      id: 1,
      button_Id:'0',
      starWave: [],
      //starDetail:[],//明星详情
      startList: [],
      starBanner:[],
      imageURLA:
        "https://fxhot.oss-cn-zhangjiakou.aliyuncs.com/jeecgossbizPath/mmexport1667117043034_1677744831036.png",
      imageURLB:
        "https://fxhot.oss-cn-zhangjiakou.aliyuncs.com/jeecgossbizPath/1668068918777.png_1677723758227.jpg",
      buttons: [
        { id: "0", label: "不限", isActive: false },
        { id: "1", label: "小于12周", isActive: false },
        { id: "2", label: "12-24周", isActive: false },
        { id: "3", label: "24-52周", isActive: false },
        { id: "4", label: "52周以上", isActive: false },
      ],
      buttons2: [
        { id: "11", label: "收益率", isActive: false },
        { id: "12", label: "总收益", isActive: false },
        { id: "13", label: "订阅人数", isActive: false },
        { id: "14", label: "最大回撤", isActive: false },
        { id: "15", label: "交易时长", isActive: false },
      ],
      customColor: "#22d1a1",
      value1: [0, 300],
      value2: [0, 100],
      marks: {
        0: "0%",
        300: {
          style: {
            color: "#1989FA",
          },
          label: this.$createElement("strong", "300%"),
        },
      },
      searchData: {
        button_Id: "",
        button_Id2: "",
        value1: this.value1,
        value2: this.value2,
      },
    };
  },
  created() {
    // this.getStarWave();
    this.getList();
    // this.getList2();
    this.getSearchList()
  },
  methods: {
   toPath(path) {
      this.$router.push(path);
    },

    goToProductDetail(id) {
      this.$router.push({
         path: `/detail` ,
         query:{id:id}
        });
    },

    goTodetail(id) {
      console.log("走马灯")
      this.$router.push({
         path: `/detail`,
         query:{id:id}
        });
    },

    toggleButton(button) {
      // this.buttons[index].clicked = !this.buttons[index].clicked;
      //button.isActive = !button.isActive;
      this.buttons.forEach((btn) => {
        if (btn !== button) {
          btn.isActive = false;
        }
      });
      button.isActive = !button.isActive;

      console.log(
        {
          order: this.searchData.button_Id2,
          pc_cycle: this.searchData.button_Id,
          pc_min_yield: String(this.value1[0]),
          pc_max_yield: String(this.value1[1]),
          pc_min_withdrawal: String(this.value2[0]),
          pc_max_withdrawal: String(this.value2[1]),
        }
      );
      this.searchData.button_Id = button.id;
      this.getSearchList()
    },
    
    toggleButton2(button) {
      // this.buttons[index].clicked = !this.buttons[index].clicked;
      //button.isActive = !button.isActive;
      this.buttons2.forEach((btn) => {
        if (btn !== button) {
          btn.isActive = false;
        }
      });
      button.isActive = !button.isActive;
      console.log(
        {
          order: this.searchData.button_Id2,
          pc_cycle: this.searchData.button_Id,
          pc_min_yield: String(this.value1[0]),
          pc_max_yield: String(this.value1[1]),
          pc_min_withdrawal: String(this.value2[0]),
          pc_max_withdrawal: String(this.value2[1]),
        }
      )
      this.searchData.button_Id2 = button.id;
      this.getSearchList()
    },
    // change事件
    changeValue1() {
      this.getSearchList()
    },
    //波形图starWaveApi
    getStarWave(id) {
      const params = {
        id: id,
        type: 1,
      };
      starWaveApi(params)
        .then((res) => {
          console.log(res); //有了
          if (res.data.code == 1) {
            this.starWave = res.data.data;
            console.log(this.starWave);
          }
          return res
        })
        .catch((err) => {
          console.log(err);
        });
      
    },
    //广场列表
      // getList2() {
      //    const params = {
      //        order: 0,
      //        page: 1,
      //        page_size: 3,
      //        level: 0,
      //        range: 0,
      //    };
      //   starListApi(params).then(res => {
      //       console.log(res);
          //  if (res.data.code == 1) {
          //      this.startList = res.data.data.data;
          //      this.startList.forEach(async(item, index)=>{
          //        await this.getStarWave(item.id).then(res=>{
          //          if(res.data.code==1) {
          //            var list = res.data.data.data
          //            var data1 = [];
          //            var data2 = [];
          //            list.forEach(item => {
          //              data1.push(item.time)
          //              data2.push(item.num)
          //            })
          //            var config = {
          //              data1,
          //              data2
          //            }
          //            this.startList[index].config = config
          //          }
          //        })
          //      })
          //      console.log(this.startList);
          //      const connectedId = res.data.data.data.id;
          //      console.log(res.data.data.data.id)
          //      // return getStarWave(connectedId);
          //  }
    //     }).catch(err => {
    //         console.log(err);
    //     });
    //  }, 

    //这个方法就没有执行，所以数据没赋值成功
     async  getList() {
      console.log(22)
      try{
         const params = {
            order: 0,
            page: 1,
            page_size: 3,
        };

        const res=await starListApi(params)
        console.log(res)
        if(res.data.code===1){
          this.starBanner = res.data.data.data;
          await this.processStarBanner(this.starBanner)
          console.log(this.starBanner, "轮播图列表>>>>>>>");
        } 
        console.debug(res, 111111111111)    
      }catch (err) {
        console.log(err);
      }
    },
    async processStarBanner(starBanner) {
      for (let index = 0; index < starBanner.length; index++) {
        const item = starBanner[index];

        // const res = await this.getStarWave(item.id);
        const res = await starWaveApi({
          id: item.id,
          type: 1
        })
        console.log(res)
        if (res.data.code === 1) {
          let list = res.data.data
          let data1 = [];
          let data2 = [];
          list.forEach((item) => {
            data1.push(item.date);
            data2.push(item.num);
          });
          const config = {
            data1,
            data2,
          };
          this.$set(starBanner[index], "config", config);//
          if(starBanner[starBanner.length-1].config) {
            this.isChartVisible = true
          }
          console.log(this.starBanner)
        }
      }
    },
    // 查询列表
    async getSearchList() {
      try {
        let params = {
          order: this.searchData.button_Id2,
          pc_cycle: this.searchData.button_Id,
          pc_min_yield: String(this.value1[0]),
          pc_max_yield: String(this.value1[1]),
          pc_min_withdrawal: String(this.value1[0]),
          pc_max_withdrawal: String(this.value1[1]),
          page: 1,
          page_size: 3,
        };
        const res = await starListApi(params);
        if (res.data.code === 1) {
          this.startList = res.data.data.data;
          console.log(this.startList, "筛选信息>>>>>>>");
          await this.processStarList(this.startList);
          
        }
        console.debug(res, 111111111111)
      } catch (err) {
        console.log(err);
      }
    },
    async processStarList(startList) {
      for (let index = 0; index < startList.length; index++) {
        const item = startList[index];
        // const res = await this.getStarWave(item.id);

        const res = await starWaveApi({
          id: item.id,
          type: 1
        })
        console.log(res)
        if (res.data.code === 1) {

          console.log('---------')
          let list = res.data.data;
          let data1 = [];
          let data2 = [];
          list.forEach((item) => {
            data1.push(item.date);
            data2.push(item.num);
          });
          const config = {
            data1,
            data2,
          };
          this.$set(startList[index], "config", config);
          //注意这里，等列表最后一个元素也赋值了config后，说明整赋值已完成，这个时候再去把状态置为true
          if(startList[startList.length-1].config) {
            this.isStartVisible = true
          }
          console.log(this.startList)
        }
      }
    },
  },

  mounted() {
    // this.initLineChart()
  },
  components: { MyEchart },
};
</script>

<style lang="scss" scoped>
.active {
  background-color: skyblue;
}

.signal {
  width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  background-color: #f4f7fe;
}

.box1 {
  width: 100%;
  height: 100px;
  margin-top: 55px;
  //background-color: white;
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  box-sizing: border-box;

  .left {
    img {
      height: 20px;
      overflow: hidden;
    }
  }
}

.box2 {
  width: 100%;
  height: 500px;
  //background-color: pink;
  //overflow: hidden;
  display: flex;

  .left {
    width: 550px;
    height: 100%;
    //background-color: skyblue;
    margin-left: 200px;

    .detailmsg {
      .left {
        border-right: 1px solid rgba($color: gray, $alpha: 0.2);
      }
    }
  }

  .right {
    width: 250px;
    height: 500px;
    //background-color: darkcyan;
    margin-left: 200px;
    text-align: left;

    .p1:hover {
      color: #0487f9;
    }

    h2 {
      font-weight: bolder;
    }

    .smallbox1 {
      width: 100%;
      height: 110px;
      //background-color: skyblue;
      display: flex;
      padding-top: 20px;
      box-sizing: border-box;
      border-bottom: 2px dotted rgba($color: gray, $alpha: 0.3);
      margin-bottom: 5px;

      .tubiao {
        width: 70px;
        height: 70px;

        img {
          width: 50px;
          height: 50px;
        }
      }

      .smallright {
        width: 100px;
        height: 100%;
        margin-left: 25px;

        .p1 {
          font-size: 20px;
          font-weight: bold;
        }

        .p2 {
          margin-top: 10px;
        }
      }
    }
  }
}

.box3 {
  width: 100%;
  height: 200px;
  background-color: white;
  padding: 10px;
  box-sizing: border-box;
  margin-top: 20px;

  .tounav {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid rgba($color: gray, $alpha: 0.2);
  }

  .period {
    .myButton.active {
      background-color: skyblue;
      color: white;
      padding: 5px;
      box-sizing: border-box;
      border-radius: 5px;
    }

    button {
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 10px;
      border: none;
      background-color: white;
    }

    button:hover {
      color: skyblue;
    }
  }

  .earning {
    .block {
      .el-slider__runway {
        background-color: red;
        /* 设置线条颜色 */
      }
    }
  }
}

.box5 {
  width: 1300px;
  //height: 1400px;
  margin-top: 50px;
 //background-color: pink;
  display: flex;
  padding-left: 20px;
  padding-right: 20px;
  overflow: hidden;
  justify-content: space-around;
  box-sizing: border-box;
  flex-wrap: wrap;

  .box5top {
    width: 100%;
    //height: 693px;
    overflow: hidden;
    padding-left: 10px;
    //background-color: skyblue;
    display: flex;
    flex-wrap: wrap;
    position: relative;
  }

  .messagebox {
    width: 360px;
    height: 645px;
    //border: 2px solid rgba($color: gray, $alpha: 0.1);
    border-radius: 10px;
    background-color: white;
    margin-top: 50px;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    margin-right: 30px;
    box-sizing: border-box;

    .p1:hover {
      color: #0487f9;
    }

    img {
      width: 120px;
      height: 120px;
      //background-color: pink;
      margin: 0 auto;
      border-radius: 50%;
      margin-top: -60px;
    }
  }

  .messagebox1 {
    width: 360px;
    height: 643px;
    //border: 2px solid rgba($color: gray, $alpha: 0.1);
    border-radius: 10px;
    background-color: white;
    margin-top: 50px;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    margin-right: 30px;
    padding-top: 230px;

    img {
      width: 90px;
      height: 80px;
      margin: 0 auto;
    }

    p {
      font-size: 25px;
      line-height: 35px;
      font-weight: 600;
    }
  }

  .messagebox1:hover {
    color: #0487f9;
  }
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

hr {
  border-color: rgba($color: gray, $alpha: 0.1);
}

.box4 {
  width: 100%;
  height: 80px;
  padding-left: 10px;
  padding-top: 30px;
  box-sizing: border-box;
  background-color: white;
  margin-top: 20px;
  display: flex;

  /*   span:hover {
    color: skyblue;
  } */
  .myButton2 {
    i {
      color: white;
    }
  }

  .myButton2.active {
    color: skyblue;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 5px;

    i {
      color: skyblue;
    }
  }

  button {
    margin-left: 20px;
    margin-right: 20px;
    height: 20px;
    //margin-top: 10px;
    border: none;
    background-color: white;
  }

  button:hover {
    color: skyblue;
  }
}

.box6 {
  width: 100%;
  height: 100px;
  //background-color: white;
  margin-top: 60px;
  display: flex;
  justify-content: space-between;
}

/* ::v-deep .el-slider .el-slider__button-wrapper::after,
.el-slider .el-slider__runway {
  background-color: green;
} */
::v-deep .el-slider__bar {
  background-color: #7cf7d8;
}

::v-deep .el-slider__button {
  border: 2px solid #7cf7d8;
  margin-left: 5px;
}

::v-deep .el-pager li {
  background-color: #0487f9 !important;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 10px;
}

::v-deep .el-pagination .btn-next,
::v-deep .el-pagination .btn-prev {
  width: 50px;
  height: 50px;
}

::v-deep .el-pagination .btn-next:active {
  background-color: #0487f9;
}

::v-deep .el-pagination .btn-prev:active {
  background-color: #0487f9;
}
</style>
